<template>
  <div>
    <div class="orderTop">
      <el-button type="primary" @click="remarkSome">批量备注</el-button>
      <el-dialog
        :visible.sync="someRemark"
        width="30%"
        :before-close="closeHandle"
      >
        <Remark :selectList="selectList" @remarkSure="remarkSure"></Remark>
      </el-dialog>
      <div style="display: flex">
        <el-input
          class="filter__right--input"
          v-model="searchText"
          @keyup.enter.native="searchBy"
          clearable
          style="width: 200px"
          placeholder="输入微信昵称搜索"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchBy"
          ></el-button>
        </el-input>
      </div>
    </div>
    <CouponTable :couponOrder="couponOrder" ref="couponList"></CouponTable>
    <div class="orderTop">
      <el-button type="primary" style="margin-top: 20px">批量备注</el-button>
      <PageManage
        :pageSize="pageSize"
        :pageNum="pageNum"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></PageManage>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import PageManage from "@/components/PageManage.vue";
import CouponTable from "./components/CouponTable.vue";
import {
  integralCouponOrder,
  remarkIntegralCouponOrder,
} from "@/api/integral/integral";
import Remark from "../common/Remark.vue";

@Component({
  components: {
    PageManage,
    CouponTable,
    Remark,
  },
})
export default class CouponOrder extends Vue {
  @Ref()
  readonly couponList: HTMLFormElement;

  /** 搜索内容 */
  searchText = "";

  /** 分页条数 */
  pageSize = 10;

  /** 分页页码 */
  pageNum = 1;

  /** 数据长度 */
  total = 0;

  /** 备注标签 */
  someRemark = false;

  /** 选择数组 */
  selectList = [];

  /** 优惠券订单数组 */
  couponOrder = [];

  mounted() {
    this.getCouponOrder();
  }

  /**
   * 获得积分优惠券
   */
  async getCouponOrder() {
    const param = {
      current: this.pageNum,
      size: this.pageSize,
      wxuserName: this.searchText,
      orderType: 1,
    };
    const res = await integralCouponOrder(param);
    res.data.list.forEach((item) => {
      item.couponType += 1;
    });
    this.couponOrder = res.data.list;
    this.total = res.data.total;
  }

  /**
   * 搜索功能
   */
  searchBy() {
    this.pageNum = 1;
    this.getCouponOrder();
  }

  /**
   * 批量选择订单
   */
  remarkSome() {
    const list = this.couponList.$refs.couponList.getCheckedItem();
    this.selectList = list.map((item) => {
      return item.id;
    });
    if (this.selectList.length === 0) {
      this.$message.error("请先选择备注订单");
      return;
    }
    this.someRemark = true;
  }

  /**
   * 批量备注
   */
  remarkSure(param) {
    const ids = this.selectList;
    remarkIntegralCouponOrder({
      ids,
      backRemark: param.backRemark,
      isCoverage: param.isCoverage,
    })
      .then(() => {
        this.$message.success("备注成功");
        this.someRemark = false;
        this.pageNum = 1;
        this.getCouponOrder();
      })
      .catch((err) => console.log(err));
  }

  /**
   * 关闭弹窗
   */
  closeHandle() {
    this.$confirm(
      "确定退出批量备注窗口？退出后，选中订单备注信息不会保留？",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      this.someRemark = false;
    });
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.pageNum = 1;
    this.getCouponOrder();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageNum = val;
    this.getCouponOrder();
  }
}
</script>

<style lang="scss" scoped>
.orderTop {
  // margin-top: 5px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
